﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>地物编辑</title>

    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.css">
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" src="http://cdn.bootcss.com/leaflet/1.0.3/leaflet.js"></script>
<script type="text/javascript" src="../../dist/iclient9-leaflet.min.js"></script>
<script type="text/javascript">
    var map, marker, featureGroup, id, resultLayer, featureService,
        baseUrl = "http://support.supermap.com.cn:8090/iserver/services/map-world/rest/maps/World",
        url = "http://support.supermap.com.cn:8090/iserver/services/data-world/rest/data";
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: {lon: 110, lat: 30},
        maxZoom: 18,
        zoom: 3
    });
    L.supermap.tiledMapLayer(baseUrl).addTo(map);
    featureGroup = L.featureGroup().addTo(map);
    featureService = L.supermap.featureService(url);
    initFeature();
    initEditView();

    function initFeature() {
        var polygon = L.polygon([[10, 100], [10, 124], [40, 124], [40, 100], [10, 100]]);
        var getFeatureParams = new SuperMap.GetFeaturesByGeometryParameters({
            toIndex: -1,
            datasetNames: ["World:Capitals"],
            geometry: polygon
        });

        featureService.getFeaturesByGeometry(getFeatureParams, function (serviceResult) {
            resultLayer = L.geoJSON(serviceResult.result.features, {
                onEachFeature: function (feature, layer) {
                    layer.bindPopup("首都：" + feature.properties.CAPITAL);
                }
            }).addTo(map);
        });
    }

    function addMarker() {
        if (!featureGroup.hasLayer(marker)) {
            var xmax = 120, xmin = 100, ymax = 50, ymin = 20;
            marker = L.circleMarker([
                Math.floor(Math.random() * (ymax - ymin + 1) + ymin),
                Math.floor(Math.random() * (xmax - xmin + 1) + xmin)
            ], {color: "red"});
            featureGroup.addLayer(marker);
            featureGroup.addTo(map);
            map.setView(marker.getLatLng());
        } else {
            alert("请先清除结果");
        }
    }

    function commit() {
        var me = this;
        if (featureGroup.hasLayer(marker)) {
            marker = marker.toGeoJSON();
            marker.properties = {POP: 1, CAPITAL: 'test'};
            var addFeatureParams = new SuperMap.EditFeaturesParameters({
                dataSourceName: "World",
                dataSetName: "Capitals",
                features: marker,
                editType: "add",
                returnContent: true
            });
            featureService.editFeatures(addFeatureParams, function (serviceResult) {
                if (serviceResult.result.succeed) {
                    id = serviceResult.result[0];
                    featureGroup.removeFrom(map);
                    me.initFeature();
                }
            });
        } else {
            alert("请先添加地物");
        }
    }

    function initEditView() {
        var infoView = L.control({position: 'topright'});
        infoView.onAdd = function () {
            var me = this;
            me._div = L.DomUtil.create('div', 'panel panel-primary infoPane');
            me._div.innerHTML = "<div class='panel-heading'>" +
                "<h5 class='panel-title text-center'>编辑</h5></div><div class='panel-body content'>" +
                "<input type='button' class='btn btn-default' value='添加地物' onclick='addMarker()'/>&nbsp;" +
                "<input type='button' class='btn btn-default' value='提交添加' onclick='commit()'/>&nbsp;" +
                "<input type='button' class='btn btn-default' value='清除结果' onclick='clearLayer()'/></div>";

            handleMapEvent(me._div, me._map);
            return me._div;
        };
        infoView.addTo(map);
    }

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }

    function clearLayer() {
        var me = this;
        if (id && featureService) {
            var deleteParams = new SuperMap.EditFeaturesParameters({
                dataSourceName: "World",
                dataSetName: "Capitals",
                IDs: [id],
                editType: "delete"
            });
            featureService.editFeatures(deleteParams, function (serviceResult) {
                if (serviceResult.result.succeed) {
                    resultLayer.removeFrom(map);
                    me.initFeature();
                } else {
                    alert("删除失败")
                }
            });
        }
        if (featureGroup && featureGroup.hasLayer(marker)) {
            featureGroup.removeLayer(marker);
            marker = null;
        }
    }
</script>
</body>
</html>